<template>
	<div class="table-section">
		<div class="table-head-section">
			<!-- <div class="search"> -->
			<v-form :form="where" :col="col" labelWidth="auto">
				<el-col :span="3">
					<el-form-item>
						<el-button type="primary" @click="_search('search')">查询</el-button>
					</el-form-item>
				</el-col>
				<el-col :span="3">
					<el-form-item>
						<slot name="hd-btn"></slot>
					</el-form-item>
				</el-col>
			</v-form>
		</div>
		<div class="table-box">
			<el-table :data="tableData" style="width: 100%" border align='center' max-height="600" @select="_select" ref="vTable" @select-all="_selectAll">
				<el-table-column type="selection" width="55" v-if="select">
				</el-table-column>

				<slot></slot>
			</el-table>

		</div>
		<div name="footer">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import table from '../mixin/table';
export default {
	name: 'Table',
	props: {
		url: {
			type: String,
			default: '',
		},
		where: {
			type: Object,
			default() {
				return {};
			},
		},
		col: {
			type: Number,
			default: 6,
		},
		select: {
			type: Boolean,
			default: false,
		},
		selectData: {
			type: Object,
			default() {
				return {};
			},
		},
		uniqueKey: {
			//列表数据唯一标识，勾选时使用
			type: String,
			default: 'id',
		},
	},
	data() {
		return {
			searchData: {},
		};
	},
	mounted() {
		this.$init();
	},
	mixins: [table],
	methods: {
		$init() {
			this._search();
		},
	},
};
</script>

style.<style lang="scss">
.table-section {
	.table-head-section {
		// display: flex;
		// justify-content: space-between;
		// padding-right: 10px;
		// .search {
		form {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			> .el-col {
				float: none;
				margin-right: 15px;
			}
			.el-form-item {
				// margin-right: 15px;
				display: flex;

				label {
					// padding-right: 0px;
					// flex:0 1 80px;
					// padding:0 10px 0 15px;
					padding-right: 10px;
					flex: 0 0 auto;
					// min-width: 150px !important;
				}
				.el-form-item__content {
					flex: 1;
					margin-left: 0 !important;
					// min-width: 150px;
				}
			}
		}
		// display: flex;
		// justify-content: flex-start;
		// margin-bottom: 20px;
		// > div {
		// 	margin-right: 10px;
		// }
		// }
	}
}
</style>
